<template>
    <div class="copyRight">
        <div class="copy-title">
            <h2>匠心维修港</h2>
            <div>地址:江西省景德镇市珠山区红塔路景德镇艺术职业大学</div>
            <div>电话:187****5367</div>
            <div>邮箱:hl18770985367@163.com</div>
        </div>
        <div class="A1">
            <h3>企业介绍</h3>
            <div>品牌介绍</div>
            <div>团队介绍</div>
            <div>关于我们</div>
        </div>
        <div class="A1">
            <h3>服务范围</h3>
            <div>产品介绍</div>
            <div>新闻动态</div>
            <div>服务品牌</div>
        </div>
        <div class="icon">
        <div class="iconBox">
            <div class="iconList">
                <WeiboOutlined />
                <WechatOutlined />
                <TwitterOutlined />
            </div>
        </div>
        <div class="href">友情链接:
            <span @click="GoPage('baidu')">百度</span> | 
            <span @click="GoPage('sina')">新浪</span> |
            <span @click="GoPage('163')">网易</span>
        </div>
    </div>
    </div>
    
</template>

<script setup>
import {WeiboOutlined,WechatOutlined,TwitterOutlined} from '@ant-design/icons-vue'
const GoPage = (path) =>{
    window.location.href=`https://www.${path}.com`
}
</script>

<style scoped>
.href {
    margin-top: 15px;
}
.iconList {
    display: flex;
    justify-content: space-between;
}
.iconList span {
    padding: 15px;
    border: 1px solid white;
    border-radius: 50%;
}
.iconList span:hover {
    background-color: white;
    color: black;
    transition: all .5s;
}
.icon {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0px 50px 50px;
}
.href span {
    cursor: pointer;
}
.A1 div ,
.A1 h3{
    margin-bottom: 20px;
}
.copyRight {
    position: relative;
    display: flex;
    justify-content: space-between;
    background-color: rgb(25 31 42);
    color: white;
    padding: 30px 100px;
    height: 300px;
}
.copy-title {
    margin-bottom: 10px;
}
.copy-title h2 {
    margin-bottom: 30px;
}
.copy-title * {
    margin-bottom: 10px;
}
</style>